<template>
    <div class="adjust">
 <button @click="video3D">打开</button><button @click="closeVideo3D">关闭</button>
        <ul  @change="video3D">
           
            
            <li>heading
                <input type="number" step="1" min="-180" max="180" v-model="heading"></li>
            <li>pitch<input type="number" step="1" min="-180" max="180" v-model="pitch"></li>
            <li>roll<input type="number" step="1" min="-180" max="180" v-model="roll"></li>
            <li>fov<input type="number" step="1" min="50" max="160" v-model="fov"></li>
        </ul>
    </div>
</template>
<script>
import CesiumVideo3d from '@/assets/js/Video3d/CesiumVideo3d'
    export default {
        data() {
            return {
                cvideo: undefined,
                heading:-100,
                pitch:-12,
                roll:0,
                fov:80,
                far :100,
            }
        },
        methods: {
            closeVideo3D(){
                if(this.cvideo){
                    this.cvideo.destroy();
                    console.log(this.cvideo);
                }
            },
            video3D() {
                if(this.cvideo){
                    this.cvideo.destroy()
                    
                }
                // global.sceneUtil.loadScene(ConstValue.SCENES[2]);
                const option = {
                    longitude: 120.432427,
                    latitude: 36.314309,
                    altitude: 3,
                    heading: this.heading,
                    pitch: this.pitch,
                    roll: this.roll,
                    near: 1,
                    far: this.far,
                    fov: this.fov,
                    url: "http://121.4.131.58:8000/images/xdl33.mp4"
                }
                let url = option.url;
                let position = {
                    x: option.longitude,
                    y: option.latitude,
                    z: option.altitude
                }
                let rotation = {
                    x: option.pitch,
                    y: option.heading,
                    z: option.roll
                }
                let far = option.far;
                let fov = option.fov;
                if (!this.cvideo)
                    global.viewer.scene.globe.depthTestAgainstTerrain = true;
                this.cvideo = new CesiumVideo3d(Cesium, global.viewer, {
                    position: position,
                    rotation: rotation,
                    aspectRatio: 100,
                    fov: fov,
                    far: far,
                    url: url
                });
                global.viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(position.x, position.y, position.z),
                    orientation: {
                        heading: Cesium.Math.toRadians(rotation.y),
                        pitch: Cesium.Math.toRadians(rotation.x),
                        roll: Cesium.Math.toRadians(rotation.z)
                    }
                })
            },
        }
    }
</script>
<style scoped>
    .adjust {
        width: 200px;
        height: 300px;
        position: absolute;
        top: 100px;
        right: 200px;
        z-index: 4;
    }
</style>